<template>
  <div class="shop-div">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >商品管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'ShopList' }"
            >商品列表</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <main>
      <!-- 主要内容 -->
      <div class="main-div-2">
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th># </th>
              <th>分类名称</th>
              <th>是否有效</th>
              <th>排序</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </main>
  </div>
</template>

<script setup>
import VueCookies from "vue-cookies";
import axios from "axios";
import { Search } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, watchEffect } from "vue";
import { Edit, Delete, Star } from "@element-plus/icons-vue";
let list = reactive({
  input2: "",
});
</script>

<style scoped>
.shop-div {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
.main-div-2 {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}

tr,
td,
th {
  border: 1px solid;
  padding: 10px;
}
table {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
thead {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
</style>